<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.set的使用.html.html</title>
    <script src="../../js/vue.js"></script>
    <style>
        *{
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head> 
<body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{name}} </h2> <br><br>
        <h2>学校地址：{{address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click='addSex'>点击添加性别</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2  v-if='student.sex'>学生性别：{{student.sex}}</h2>
        <h2>学生年龄：真实 ：{{student.tAge}}  对外：{{student.fAge}}</h2>
        <h2>学生朋友：</h2>
        <ul>
            <li v-for='(person, index) in student.friends' :key="index">
                姓名：{{person.name}}
                年龄：{{person.age}}
            </li>
        </ul>

        <h2></h2>
        
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                address: '成都',
                student: {
                    name: 'jerry',
                    age: {
                        tAge: 34,
                        fAge: 23
                    },
                    friends: [
                        {name: 'bob', age: 23},
                        {name: '张三', age: 23},
                    ]

                }

            },
            methods: {
                addSex(){
                    console.log('--------')
                    this.$set(this.student, 'sex',"男")
                }
            },
        })
    </script>
</body>
</html>